import React from 'react'
import BottomNavigation from "@material-ui/core/BottomNavigation"
import HomeIcon from '@material-ui/icons/home';
import FavoriteIcon from '@material-ui/icons/Attachment';
import DiscoverIcon from '@material-ui/icons/Search';
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction"
import hm from '../../common/global-history'
export interface IBottomNavBarState 
{
    selectValue:string;
}
export default class BottomNavBar extends React.Component<any,IBottomNavBarState>{
    state:IBottomNavBarState ={
        selectValue:"/home"
    }
    constructor(props){
        super(props);
    }
    render(){
        return <BottomNavigation value={this.state.selectValue}
        onChange={(event, newValue) => {
            this.setState({
                selectValue:newValue
            });
            this.gotoX(newValue);
        }}  style={{background:"whitesmoke"}}>
                <BottomNavigationAction value="/home" label="慕秋" icon={<HomeIcon></HomeIcon>}/>
                <BottomNavigationAction value="/fav" label="库" icon={<DiscoverIcon></DiscoverIcon>}/>
                <BottomNavigationAction value="/discover" label="发现"   icon={<FavoriteIcon></FavoriteIcon>}/>
                <BottomNavigationAction value="/dx" label="Dx"   icon={<FavoriteIcon></FavoriteIcon>}/>
            </BottomNavigation>
    }
    gotoX(path:string){
        hm.instance().navigateTo(path);
    }
}
//@ts-ignore
// export default withRouter(BottomNavBar) as React.ComponentClass<{}>;